import React from 'react';
import './imageUpload.less';


class imageUpload extends React.Component {
    //getCategory()
    constructor(props) {
        super(props);

        this.state = {
            list: [],
            imgUrl:''

        }
    }
    componentWillMount = () => {
       this.getImageList()
    }
     getImageList=()=>{

       React.api.get('/upload/all')
            .then((res) => {
                console.log(res)
                this.setState({
                    list: res.data.obj
                    
                })
            }).catch((err) => {
                console.log(err)
            })

     }

    sub=()=>{
    console.log(this.refs.inputName.value)
      var formData = new FormData();
     
       formData.append("file",this.state.imgUrl.split(";")[1].split(",")[1]);
       formData.append("name",this.refs.inputName.value);
    
       var  imgUrl=this.state.imgUrl;

       let config = {
            headers:{'Content-Type':'multipart/form-data'}
          };
       React.api.post('/upload/add',formData,config)
        .then((res) => {
            if (res.data.code == 200) {
               this.setState({
                    list: res.data.obj
                    
                })
               
            } else {
                alert(res.msg)
            }

        })

    }
    change=()=>{
        
         var file = this.refs.inputDom.files[0]
        if (!/image\/\w+/.test(file.type)) {
            alert("文件必须为图片！");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        var _self=this;
        reader.onload = function(e) {
            //imgMsg=this.result;
            _self.setState({
                imgUrl:this.result,
                imgName:file
            })
           
        }

    }
    
    render() {
        return ( <
            div id = 'categoryView' >
            <
            p >
            <
            label > 请选择一个图像文件： < /label><
            input type = "text" ref='inputName' 
            id = "file_input" / > <
            input type = "file" ref='inputDom' onChange={this.change}
            id = "file_input" / >
            <
            /p> <
            div id = "result" >
            <img id="img" src={this.state.imgUrl} alt=""/>
            < /div> <
            div class="submit" onClick = {()=>this.sub()} > 提交 < /div> 
            <div className='category_item spec'>
            <label>名字</label>
            <label>路径</label>
            <label>图片</label>
            <label class="label_spec">操作</label>
            </div>
            {
                this.state.list.map((v, i) => {
                    return ( <
                        div className = 'category_item spec'
                        key = { i } >
                        <label>{ v.name }</label>
                        <label>{ v.url }</label>
                        <img id="img" src={ v.url} alt=""/>

                        {
                            v.yn === '0' &&
                                <
                                label  > 上架 < /label> 
                        } {
                            v.yn !== '0' &&
                                <
                                label > 下架 < /label> 
                        } <
                        label > 修改 < /label>  < /
                        div >
                    )
                })
            }<
            /div>
        )
    }
}
export default imageUpload